// Progress
tdr-progress(ng-show="vm.showProgress" info="vm.progressInfo")

// Tree
.virtualRepeatInfiniteScroll(ng-show="!vm.showProgress && vm.showTree")
	md-virtual-repeat-container.vertical-container.virtual-repeat-full-height(
		id="treeInfiniteScroll"
		md-item-size="45"
		md-top-index="vm.topIndex"
		ng-show="vm.showNodes")

		.treeNodes.repeated-item(id="{{item._id}}" md-virtual-repeat="item in vm.nodesToShow")
			.treeNode(
			style="margin-left:{{item.level * 15}}px"
			ng-if="item.name"
			layout="row"
			layout-align="start center"
			flex
			ng-class="{treeNodeSelected: item.selected === 1, treeNodeParentOfUnselected: item.selected === 0 }")
				// Expand/collapse
				md-button.md-icon-button.md-primary.expandButton.clickToExpand(
					aria-label="Toggle Expand"
					ng-click="vm.toggleNodeExpansion($event, item._id)"
					ng-if="!item.status && item.canExpand && !item.expanded")

					md-icon.angular-material-icons add_box

				md-button.md-icon-button.md-primary.expandButton.clickToCollapse(
					aria-label="Toggle Expand"
					ng-click="vm.toggleNodeExpansion($event, item._id)"
					ng-if="!item.status && item.canExpand && item.expanded")

					md-icon.angular-material-icons indeterminate_check_box

				md-button.md-icon-button.md-primary.expandButton.clickNoEvent(
					aria-label="Toggle Expand"
					ng-if="!item.status && !item.canExpand")

					md-icon.angular-material-icons remove

				md-button.md-icon-button.noAccessButton(aria-label="Status", ng-if="item.status")
					md-icon.angular-material-icons(ng-if="item.status==='NO_ACCESS'") do_not_disturb
					md-icon.angular-material-icons(ng-if="item.status==='NOT_FOUND'") error_outline

				// Name
				div(flex, layout="row",
					layout-align="start center"
					ng-dblclick="vm.selectAndCentreNode(item)"
					ng-click="vm.selectNode($event, item)")

					p(ng-if="!item.status") {{item.name}}
					p.noAccessName(ng-if="item.status") {{item.name}}

				// Toggle visibility
				md-button.md-icon-button.md-primary.toggleButton(aria-label="Toggle Visible", ng-click="vm.toggleTreeNode($event, item)", ng-if="!item.status")
					md-icon.angular-material-icons.visible(ng-if="item.toggleState==='visible'") visibility
					md-tooltip(ng-if="item.toggleState==='visible'") Visible

					md-icon.angular-material-icons.invisible(ng-if="item.toggleState==='invisible'") visibility_off
					md-tooltip(ng-if="item.toggleState==='invisible'") Invisible

					md-icon.angular-material-icons.parentOfInvisible(aria-label="ParentOfInvisible", ng-if="item.toggleState==='parentOfInvisible'") visibility
					md-tooltip(ng-if="item.toggleState==='parentOfInvisible'") Some Children Invisible

			md-divider(ng-if="item.name")

// Filter list
div(class="virtualRepeatInfiniteScroll" ng-if="!vm.showTree && vm.filterItemsFound")
	md-virtual-repeat-container.vertical-container
		//.treeNodes.filterNode.repeated-item(md-virtual-repeat="item in vm.infiniteItemsFilter", md-on-demand="", flex="", layout="row", layout-align="start center")
		.treeNodes.filterNode.repeated-item(md-virtual-repeat="item in vm.nodes")
			// Name
			div(layout="row", layout-align="start center", flex)
				div(
					flex,
					layout="row",
					layout-align="start center"
					ng-class="{treeNodeSelected: item.selected === 1, treeNodeParentOfUnselected: item.selected === 0 }"
					ng-dblclick="vm.selectAndCentreNode($event, item)"
					ng-click="vm.filterNodeSelected($event, item)")

					p.filterListNodeName {{item.name}}


			md-divider(ng-if="item")

.cardInfo(ng-if="!vm.showTree && !vm.filterItemsFound && !vm.showProgress")
	p No items found
